<template>
  <div>
    <van-tabbar class="appNav" v-model="active">
      <van-tabbar-item
        v-for="(item, index) in icon"
        :key="index"
        :to="item.leaveFor"
      >
        <span>{{item.name}}</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? item.active : item.inactive"
        >
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      active: 0,
      icon: [
        {
          name: "首页",
          active: "http://127.0.0.1/img/default/tabBar-02.png",
          inactive: "http://127.0.0.1/img/default/tabBar-01.png",
          leaveFor: "/"
        },
        {
          name: "分类",
          active: "http://127.0.0.1/img/default/tabBar-04.png",
          inactive: "http://127.0.0.1/img/default/tabBar-03.png",
          leaveFor: ""
        },
        {
          name: "客服",
          active: "http://127.0.0.1/img/default/tabBar-10.png",
          inactive: "http://127.0.0.1/img/default/tabBar-09.png",
          leaveFor: ""
        },
        {
          name: "购物车",
          active: "http://127.0.0.1/img/default/tabBar-06.png",
          inactive: "http://127.0.0.1/img/default/tabBar-05.png",
          leaveFor: ""
        },
        {
          name: "会员",
          active: "http://127.0.0.1/img/default/tabBar-08.png",
          inactive: "http://127.0.0.1/img/default/tabBar-07.png",
          leaveFor: "/personal"
        }
      ]
    }
  },
  mounted() {
    this.active = this.$parent.tabBar
  }
}
</script>

<style lang="scss">
.appNav{
  .van-tabbar-item--active {
    color: #d81e06 !important;
  }
}
</style>